<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .page-4 {
        width: 100%;
        height: 100%;
        background-color: firebrick;
      }
    </style>
  </head>
  <body>
    <div class="page-4">
      <p>页面page4</p>
      <p>1. offset 相关父级的偏移量，与滚动无关</p>
      <p>2. 获取浏览器窗口滚动距离使用：document.documentElement.scrollTop</p>
      <p>3. document.body.scrollTop 是IE属性，不要再使用了，使用谷歌内核API</p>
      <p>4. Element.getBoundingClientRect().top 是获取相对可视窗口的距离。因此通常用来居中</p>
      <button type="submit" class="btn">button</button>
      <ul>
        <li class="li1">1<a href="#1">文字1</a></li>
        <li class="li2">2<a href="#2">文字2</a></li>
        <li class="li3">3<a href="#3">文字3</a></li>
        <li class="li4">4<a href="#4">文字4</a></li>
        <li class="li5">5<a href="#5">文字5</a></li>
        <li class="li6">6<a href="#6">文字6</a></li>
        <li class="li7">7<a href="#7">文字7</a></li>
        <li class="li8">8<a href="#8">文字8</a></li>
        <li class="li9">9<a href="#9">文字9</a></li>
        <li class="li10">10<a href="#10">文字10</a></li>
        <li class="li11">11<a href="#11">文字11</a></li>
        <li class="li12">12<a href="#12">文字12</a></li>
        <li class="li13">13<a href="#13">文字13</a></li>
        <li class="li14">14<a href="#14">文字14</a></li>
        <li class="li15">15<a href="#15">文字15</a></li>
        <li class="li16">16<a href="#16">文字16</a></li>
        <li class="li17">17<a href="#17">文字17</a></li>
        <li class="li18">18<a href="#18">文字18</a></li>
        <li class="li19">19<a href="#19">文字19</a></li>
        <li class="li20">20<a href="#20">文字20</a></li>
        <li class="li21">21<a href="#21">文字21</a></li>
        <li class="li22">22<a href="#22">文字22</a></li>
        <li class="li23">23<a href="#23">文字23</a></li>
        <li class="li24">24<a href="#24">文字24</a></li>
        <li class="li25">25<a href="#25">文字25</a></li>
        <li class="li26">26<a href="#26">文字26</a></li>
        <li class="li27">27<a href="#27">文字27</a></li>
        <li class="li28">28<a href="#28">文字28</a></li>
        <li class="li29">29<a href="#29">文字29</a></li>
        <li class="li30">30<a href="#30">文字30</a></li>
        <li class="li31">31<a href="#31">文字31</a></li>
        <li class="li32">32<a href="#32">文字32</a></li>
        <li class="li33">33<a href="#33">文字33</a></li>
        <li class="li34">34<a href="#34">文字34</a></li>
        <li class="li35">35<a href="#35">文字35</a></li>
        <li class="li36">36<a href="#36">文字36</a></li>
        <li class="li37">37<a href="#37">文字37</a></li>
        <li class="li38">38<a href="#38">文字38</a></li>
        <li class="li39">39<a href="#39">文字39</a></li>
        <li class="li40">40<a href="#40">文字40</a></li>
        <li class="li41">41<a href="#41">文字41</a></li>
        <li class="li42">42<a href="#42">文字42</a></li>
        <li class="li43">43<a href="#43">文字43</a></li>
        <li class="li44">44<a href="#44">文字44</a></li>
        <li class="li45">45<a href="#45">文字45</a></li>
        <li class="li46">46<a href="#46">文字46</a></li>
        <li class="li47">47<a href="#47">文字47</a></li>
        <li class="li48">48<a href="#48">文字48</a></li>
        <li class="li49">49<a href="#49">文字49</a></li>
        <li class="li50">50<a href="#50">文字50</a></li>
        <li class="li51">51<a href="#51">文字51</a></li>
        <li class="li52">52<a href="#52">文字52</a></li>
        <li class="li53">53<a href="#53">文字53</a></li>
        <li class="li54">54<a href="#54">文字54</a></li>
        <li class="li55">55<a href="#55">文字55</a></li>
        <li class="li56">56<a href="#56">文字56</a></li>
        <li class="li57">57<a href="#57">文字57</a></li>
        <li class="li58">58<a href="#58">文字58</a></li>
        <li class="li59">59<a href="#59">文字59</a></li>
        <li class="li60">60<a href="#60">文字60</a></li>
        <li class="li61">61<a href="#61">文字61</a></li>
        <li class="li62">62<a href="#62">文字62</a></li>
        <li class="li63">63<a href="#63">文字63</a></li>
        <li class="li64">64<a href="#64">文字64</a></li>
        <li class="li65">65<a href="#65">文字65</a></li>
        <li class="li66">66<a href="#66">文字66</a></li>
        <li class="li67">67<a href="#67">文字67</a></li>
        <li class="li68">68<a href="#68">文字68</a></li>
        <li class="li69">69<a href="#69">文字69</a></li>
        <li class="li70">70<a href="#70">文字70</a></li>
        <li class="li71">71<a href="#71">文字71</a></li>
        <li class="li72">72<a href="#72">文字72</a></li>
        <li class="li73">73<a href="#73">文字73</a></li>
        <li class="li74">74<a href="#74">文字74</a></li>
        <li class="li75">75<a href="#75">文字75</a></li>
        <li class="li76">76<a href="#76">文字76</a></li>
        <li class="li77">77<a href="#77">文字77</a></li>
        <li class="li78">78<a href="#78">文字78</a></li>
        <li class="li79">79<a href="#79">文字79</a></li>
        <li class="li80">80<a href="#80">文字80</a></li>
        <li class="li81">81<a href="#81">文字81</a></li>
        <li class="li82">82<a href="#82">文字82</a></li>
        <li class="li83">83<a href="#83">文字83</a></li>
        <li class="li84">84<a href="#84">文字84</a></li>
        <li class="li85">85<a href="#85">文字85</a></li>
        <li class="li86">86<a href="#86">文字86</a></li>
        <li class="li87">87<a href="#87">文字87</a></li>
        <li class="li88">88<a href="#88">文字88</a></li>
        <li class="li89">89<a href="#89">文字89</a></li>
        <li class="li90">90<a href="#90">文字90</a></li>
        <li class="li91">91<a href="#91">文字91</a></li>
        <li class="li92">92<a href="#92">文字92</a></li>
        <li class="li93">93<a href="#93">文字93</a></li>
        <li class="li94">94<a href="#94">文字94</a></li>
        <li class="li95">95<a href="#95">文字95</a></li>
        <li class="li96">96<a href="#96">文字96</a></li>
        <li class="li97">97<a href="#97">文字97</a></li>
        <li class="li98">98<a href="#98">文字98</a></li>
        <li class="li99">99<a href="#99">文字99</a></li>
        <li class="li100">100<a href="#100">文字100</a></li>
      </ul>
      <a href="javascript:;">返回顶层</a>
      <div id="routeView"></div>

    </div>

    <script>
      var doms = document.querySelectorAll("a[href]");

      doms.forEach((element) => {
        element.addEventListener(
          "click",
          (e) => {
            scrollToTop(element);
          },
          false
        );
      });

      const scrollToTop = (element) => {
        let sTop =
          document.documentElement.scrollTop || document.body.scrollTop;

        window.scrollTo({
          top: element.getBoundingClientRect().top + sTop,
          left: 0,
          behavior: "smooth", //重点在此
        });
      };
    </script>
  </body>
</html>
